<template>
  <div class="app-container">
    <el-card>
      <el-tabs v-model="activeTab">
        <el-tab-pane label="改单中" :name="1"> </el-tab-pane>
        <el-tab-pane label="改单完成" :name="2"> </el-tab-pane>
      </el-tabs>
      <el-space>
        <el-input placeholder="请输入内容" style="margin-right: 10px" />
        <el-date-picker
          value-format="YYYY-MM-DD"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="margin-right: 10px"
        />
        <el-select style="width: 100px" placeholder="产品类型"></el-select>
        <el-select style="width: 100px" placeholder="接单员"></el-select>
        <el-button type="primary" icon="search">搜索</el-button>
      </el-space>
      <el-button
        v-show="activeTab == 1"
        class="float-right"
        type="primary"
        @click="handleInitiate"
        >发起改单</el-button
      >
      <el-table
        border
        :data="editingList"
        style="margin-top: 10px; min-height: 66vh"
      >
        <el-table-column label="序号" width="100" align="center" type="index" />
        <el-table-column label="订单编号" prop="orderNo" />
        <el-table-column label="产品类型" prop="productType" width="100" />
        <el-table-column label="客户" prop="customerName" />
        <el-table-column label="产品名称" prop="name" />
        <el-table-column label="关键参数" prop="keyParams" width="200">
          <template #default="{ row }">
            <span class="line-clamp-1">{{ row.keyParams }}</span>
          </template>
        </el-table-column>
        <el-table-column label="改单字段" prop="editColumns" width="200">
          <template #default="{ row }">
            <span class="line-clamp-1">{{ row.editColumns }}</span>
          </template>
        </el-table-column>
        <el-table-column label="技术部门" prop="techDepart" />
        <el-table-column label="生产部门" prop="produceDepart" />
        <el-table-column label="改单日期" prop="editDate" width="200" />
        <el-table-column label="接单员" prop="orderTaker" width="100" />
        <el-table-column label="技术员" prop="techHeader" />
        <el-table-column label="操作" align="center" width="220" fixed="right">
          <template #default>
            <el-space>
              <el-button type="primary" link @click="checkDetail"
                >查看</el-button
              >
              <el-button type="primary" link>编辑</el-button>
              <el-button type="primary" link>提交审核</el-button>
              <el-button type="danger" link>取消</el-button>
            </el-space>
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        v-show="editingList.length > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>
  </div>
</template>
<script setup>
import { Plus, Refresh, Search, Sort } from "@element-plus/icons-vue";
import { ElMessageBox } from "element-plus";
import { onMounted } from "vue";

const router = useRouter();

const activeTab = ref(1);

const total = ref(0);
// 查询参数
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  ipaddr: undefined,
  userName: undefined,
  status: undefined,
  orderByColumn: undefined,
  isAsc: undefined,
});

const editingList = ref([
  {
    orderNo: "1235423",
    productType: "323342232",
    customerName: "中山崎",
    name: "门板",
    keyParams: "10CM 对开-内开坦克整拼 F-1075 锌..",
    editColumns: "室外颜色 室内颜色 门框颜色 备注 附..",
    techDepart: "已完成",
    produceDepart: "改单中",
    editDate: "2024-08-15 10:58:44",
    orderTaker: "改单员一号",
    techHeader: "蒋劲服",
  },
]);
const editedList = ref([
  {
    orderNo: "1235423",
    productType: "323342232",
    customerName: "中山崎",
    name: "门板",
    keyParams: "10CM 对开-内开坦克整拼 F-1075 锌..",
    editColumns: "室外颜色 室内颜色 门框颜色 备注 附..",
    techDepart: "已完成",
    produceDepart: "已完成",
    editDate: "2024-08-15 10:58:44",
    orderTaker: "改单员一号",
    techHeader: "蒋劲服",
  },
  {
    orderNo: "1235423",
    productType: "323342232",
    customerName: "中山崎",
    name: "门板",
    keyParams: "10CM 对开-内开坦克整拼 F-1075 锌..",
    editColumns: "室外颜色 室内颜色 门框颜色 备注 附..",
    techDepart: "已完成",
    produceDepart: "已完成",
    editDate: "2024-08-15 10:58:44",
    orderTaker: "改单员一号",
    techHeader: "蒋劲服",
  },
]);

onMounted(() => {});
function getList() {}
function checkDetail() {
  router.push("./attrseditdetail");
}
function handleInitiate() {
  ElMessageBox.confirm("功能正在开发中...", "提示", {
    type: "info",
    showConfirmButton: false,
    cancelButtonText: '关闭'
  })
    .then((res) => {
      console.log(res);
    })
    .catch((error) => {
      console.log(error);
    });
}
</script>
<style lang="scss" scoped>
:deep(.pagination-container .el-pagination) {
  left: 10px;
  position: absolute;
}
</style>
